<template>
	<div class="statisticsContent">
		<el-form :model="statistics">
			<div class="tag-box-border">
				<el-form-item class="formItem">
					<el-select size="small" class="selectClass" v-model="selected" @change="changeChartsData" placeholder="请选择">
				        <el-option 
				        	v-for="(item,index,key) in options1"
				        	:key="index"
				        	:label="item.label"
				        	:value="item.value">
				        </el-option>
				    </el-select>
					<el-cascader
						v-show="showCascader"
						size="small"
					    placeholder=""
					    expand-trigger="hover"
					    :options="options2"
					    v-model="selectedOptions3"
					    filterable
					    @change="handleItemChange"
					></el-cascader>
				</el-form-item>
				<div class="lineClass"></div>
				<div class="total-box-border">
					<div class="total">总花费</div>
					<canvas id="myCanvas" width="260" height="160" />
					<span class="text">{{spendText}}</span>
				</div>
				<ul class="item-box-border">
					<li class="item_line_1">
						<div>总覆盖
							<el-tooltip class="item" effect="dark" content="看到广告的用户人数" placement="top">
								<i class="iconfont icon-tip "></i>
							</el-tooltip>
						</div>
						<span class="line_1"></span>
						<span class="line_2"></span>
						<span class="line_3"></span>
						<span class="line_4"></span>
						<span class="line_5"></span>
						<span class="line_6"></span>
						<span class="line_7"></span>
						<span class="line_8"></span>
						<b>{{cover}}</b>
					</li>
					<li class="item_line_2">
						<div>总展示
							<el-tooltip class="item" effect="dark" content="广告的展示次数（展示数可能大于覆盖数）" placement="top">
								<i class="iconfont icon-tip "></i>
							</el-tooltip>
						</div>
						<span class="line_1"></span>
						<span class="line_2"></span>
						<span class="line_3"></span>
						<span class="line_4"></span>
						<span class="line_5"></span>
						<span class="line_6"></span>
						<span class="line_7"></span>
						<span class="line_8"></span>
						<b>{{show}}</b>
					</li>
					<li class="item_line_3">
						<div>总成效
							<el-tooltip class="item" effect="dark"placement="top">
								<div slot="content" class="mult-text">
 									目标为访问量时，成效为点击链接量<br />目标为品牌知名度时，成效为覆盖数<br />目标为主页赞时，成效为点赞数
								</div>
								<i class="iconfont icon-tip "></i>
							</el-tooltip>
						</div>
						<span class="line_1"></span>
						<span class="line_2"></span>
						<span class="line_3"></span>
						<span class="line_4"></span>
						<span class="line_5"></span>
						<span class="line_6"></span>
						<span class="line_7"></span>
						<span class="line_8"></span>
						<b>{{effect}}</b>
					</li>
					<li class="item_line_4">
						<div>CPM
							<el-tooltip class="item" effect="dark" content="千次展示费用" placement="top">
								<i class="iconfont icon-tip"></i>
							</el-tooltip>
						</div>
						<span class="line_1"></span>
						<span class="line_2"></span>
						<span class="line_3"></span>
						<span class="line_4"></span>
						<span class="line_5"></span>
						<span class="line_6"></span>
						<span class="line_7"></span>
						<span class="line_8"></span>
						<b>￥<i>{{cpm}}</i></b>
					</li>
					<li class="item_line_5">
						<div>CPC
							<el-tooltip class="item" effect="dark" content="每次点击费用" placement="top">
								<i class="iconfont icon-tip "></i>
							</el-tooltip>
						</div>
						<span class="line_1"></span>
						<span class="line_2"></span>
						<span class="line_3"></span>
						<span class="line_4"></span>
						<span class="line_5"></span>
						<span class="line_6"></span>
						<span class="line_7"></span>
						<span class="line_8"></span>
						<b>￥<i>{{cpc}}</i></b>
					</li>
					<li class="item_line_6">
						<div>成效转化率
							<el-tooltip class="item" effect="dark" content="成效转化率=总成效／总展示数" placement="top">
								<i class="iconfont icon-tip "></i>
							</el-tooltip>
						</div>
						<span class="line_1"></span>
						<span class="line_2"></span>
						<span class="line_3"></span>
						<span class="line_4"></span>
						<span class="line_5"></span>
						<span class="line_6"></span>
						<span class="line_7"></span>
						<span class="line_8"></span>
						<b><i>{{change}}</i>%</b>
					</li>
				</ul>
			</div>
			<loading :customClass="customLoading" v-show="showTable" />
			<el-form-item>
				<div class="titleName">成效分析</div>
				<div class="dateSelector">
					<el-select size="small" v-model="value" @change="changeDate" style="width: 217px;" >
			            <el-option       	
			              v-for="(item,index,key) in options3"
			              :label="item.label"
			              :key="index"
			              :value="item.value">
			            </el-option>
			        </el-select>
		            <el-date-picker
		            	size="small"
		            	v-show="showDateSelector"
		              @change="handleDateChange"
		              v-model="dateRange"
		              type="daterange"
		              :placeholder="dateRange ? ' ' : '请选择日期范围'"
		              :clearable=false
		              >
		            </el-date-picker>
				</div>
			</el-form-item>
			<div class="lineClass lineClass2"></div>
			<el-form-item style="clear: both;">
				<div class="highcharts-box-border tag-box-border" style="margin-right: 20px;">
					<highcharts v-if="showHighChart" :options="charts1"></highcharts>
					<div class="empty-content emptyWidth1" v-show="showTableEmpty">
		                <div style="width: 100%">
		                    <img src="../../assets/img/no-data.png">
		                </div>
		                <span>暂无数据</span>
		            </div>
				</div>
				<div class="highcharts-box-border tag-box-border" >
					<highcharts v-if="showHighChart" :options="charts2" ></highcharts> 
					<div v-if="showHighChart" class="tip-txt"><i class="iconfont icon-remand" style="margin-right: 7px;"></i>最好的时间按选择时间展示全部数据，如果不足整周可能会有误差</div>
					<div class="empty-content emptyWidth2" v-show="showTableEmpty">
		                <div style="width: 100%">
		                    <img src="../../assets/img/no-data.png">
		                </div>
		                <span>暂无数据</span>
		            </div>
				</div>
			</el-form-item>
			<div class="tag-box-border" style="padding-top: 0;">
				<div class="button" v-model="newValue">
		            <div v-for="(items,index,key) in searchbtn" :key="index" class="item" :class="items.isactive?'active':''" @click="addClass(index)">{{items.name}}</div>
				</div>
				<div class="tag-box-border">
					<el-form-item style="margin-bottom: 0;">
						<el-select size="small" class="staticClass" v-bind:style="{display: changeDisplay}" v-model="statistics.statisticsStatic" @change="changeCondition" >
					        <el-option
					        	v-for="(item,index,key) in options4"
					        	:key="index"
					        	:value="item.value"
					        	:label="item.label">
					        </el-option>
					   	</el-select>
					   	<div style="clear: both;">
					   		<div class="highcharts-box-border" >
								<highcharts v-if="showHighChart" :options="charts3" ></highcharts>
								<div class="empty-content emptyWidth3" v-show="showTableEmpty" style="left: -15px;">
					                <div style="width: 100%">
					                    <img src="../../assets/img/no-data.png">
					                </div>
					                <span>暂无数据</span>
					            </div>
							</div>
							<div class="Hightline"></div>
							<div class="pie-box-border">
								<highcharts v-if="showHighChart" :options="charts4" ></highcharts>
								<div class="empty-content emptyWidth3" v-show="showTableEmpty" style="left: 39px;">
					                <div style="width: 100%">
					                    <img src="../../assets/img/no-data.png">
					                </div>
					                <span>暂无数据</span>
					            </div>
							</div>
					   </div>
					</el-form-item>
				</div>
			</div>
		</el-form>
	</div>
</template>

<script>
	import Vue from 'vue'
	import axios from '~/plugins/axios'
	import {Form,FormItem,Select,Option,Input,Button,DatePicker,Col,Row,Progress,Tooltip,Cascader,Autocomplete,Scrollbar} from 'element-ui';
	import VueHighcharts from "vue-highcharts"
	import Highcharts from  "highcharts";
	import highchartsMore from 'highcharts/highcharts-more';
	import solidGauge from 'highcharts/modules/solid-gauge';
	import { mapGetters } from 'Vuex'
	import {options1,options3,options4,searchbtn,charts1,charts2,charts3,charts4} from '~/assets/js/option_st'
	import { getDate} from '~/assets/js/global'
	import loading from '~/components/loading.vue'

	Vue.use(VueHighcharts, { Highcharts });
	Vue.use(Form)
	Vue.use(FormItem)
	Vue.use(Autocomplete)
	Vue.use(Select)
	Vue.use(Option)
	Vue.use(Input)
	Vue.use(Button)
	Vue.use(DatePicker)
	Vue.use(Col)
	Vue.use(Row)
	Vue.use(Progress)
	Vue.use(Tooltip)
	Vue.use(Cascader)
    Vue.use(Scrollbar)
	
	export default{
		components: {
            loading
        },
        head(){
            return{
                title: 'ADS-Facebook统计分析'
            }
        },
		data(){
			return{
				showTable:true,
				showTableEmpty:false,
				customLoading : 'top:550px;',
				showCascader:false,
				cover:'0',
				show:'0',
				effect:'0',
				cpm:'0.00',
				cpc:'0.00',
				change:'0.00',
				firstId:'',
				changeDisplay:'block',
				restaurants: [],
				state1:'',
				selected:'1',
				value:'LIFETIME',
				dateRange: '',
                showDateSelector :false,
				showHighChart : false,
				newValue:'',
				selectedOptions3:[],
				adseriesListData:[],
				adgroupListData:[],
				adListData:[],
				objClone:{},
				type:'',
				id:'',
				spendText:'',
				startTime:'',
				endTime:'',
				allTotalSpend:'',
				stateFlag:true,
				changeState:true,
				
				options1:options1,
				
				options2:[],
				
				options3:options3,
                
                options4:options4,
                
                searchbtn:searchbtn,
                
				statistics: {
                    statisticsType: '',
                    statisticsStatic:'1',
                    statisticsData:'',
                    type:'',
                    showDate:'false'
              	},
              	
              	//图表1
                charts1:charts1,
				charts1Data:[],
				//图表2
				charts2:charts2,
				charts2Data:[],
				//图表3
				charts3:charts3,
				charts3Data:[],
				//图表4
				charts4:charts4,
				charts4Data:[],
			}
		},
		
		computed : {
            ...mapGetters({
                    'haveRender': 'getHaveRenderHighMore'
            })
		},
		
		created() {

       	},
		updated(){
			
		},
		mounted(){
			this.showHighChart = true;
			//this.showTable=false;
			if(!this.haveRender){
				highchartsMore(Highcharts);
				solidGauge(Highcharts);
				this.$store.commit('STATISTICS_HAVERENDER_HIGHMORE' , {haveRenderHighMore : true});
			}

			if(process.BROWSER_BUILD){
				this.createCanvas(0)
			}

			this.getUrl()
			if (this.type==undefined) {
				this.getInfo(this.selected)
				
			}else{
				this.selected=this.type
				this.newValue=this.id
				this.getInfo()
				if (this.type==1) {
					this.changeChartsData(this.type)
				}
	            this.handleItemChange()
			}
			
		},
		
        methods:{
        	//查询该账户下的总余额和总花费的和
        	getInfo(index){
        		this.$store.dispatch('getInfo')
        			.then((response) => {
        				if(response.data.success == true){
                            let result = response.data;
                            this.allTotalSpend=result.data;
                            this.changeChartsData(index)
                        }
        			})
        			.catch((error) => {
        				this.changeDisplay='none'
                        this.showTable = false;
	                    this.showHighChart=false;
						this.showTableEmpty = true;
                   })
        	},
        	//当广告系列、广告组、广告切换时执行的函数
        	changeChartsData(index){
        		if (index==1) {
        			this.options2=[]
        			this.selectedOptions3=[]
        			this.getAdseriesList(index)
        		}
        		if (index==2) {
        			this.options2=[]
        			this.selectedOptions3=[]
        			this.getAdgroupList(index)
        		}
        		if (index==3) {
        			this.options2=[]
        			this.selectedOptions3=[]
        			this.getAdList(index)
        		}
        	},
        	
        	//选中广告系列、广告组、广告对应的列表时执行的函数
        	handleItemChange(value){
        		if (value) {
        			this.newValue=value[value.length-1]
        		}
        		if (this.selected==1) {
        			this.getAdseriesTotal(this.newValue)
        		}
        		if (this.selected==2) {
        			this.getAdgroupTotal(this.newValue)
        		}
        		if (this.selected==3) {
        			this.getAdTotal(this.newValue)
        		}
        		this.showTable=true
        		this.showHighChart=true
        		this.showTableEmpty = false
        		if (this.value) {
        			this.stateFlag=true
        		}else{
        			this.stateFlag=false
        		}
				this.changeDate()
				if (this.newValue=='') {
					this.changeDisplay='none'
					this.showTable = false;
                    this.showHighChart=false;
					this.showTableEmpty = true;
				}
			},
			
			//获取广告系列的列表
        	getAdseriesList(){
				this.$store.dispatch('getAdseriesList',{})
				.then((response) => {
					if (response) {
						if (response.data.success == true) {
	    					let result = response.data;
	    					if (result.data!='') {
	    						this.showCascader=true
	    						let adseriesList=result.data
	    						for (var i=0;i<adseriesList.length;i++) {
	    							this.options2.push({"value":adseriesList[i].id,"label":adseriesList[i].name})
	    							if (adseriesList[i].id==this.id && this.changeState) {
										this.selectedOptions3.push(adseriesList[i].id)
										this.changeState=false
									}
	    							if (this.id==undefined && this.changeState) {
										this.selectedOptions3.push(adseriesList[0].id)
										this.newValue=adseriesList[0].id
										this.handleItemChange()
										this.changeState=false
									}
	    						}
	    						
	    					}else{
	    						this.showCascader=false
	    						this.changeDisplay='none'
		    					this.showTable = false;
			                    this.showHighChart=false;
								this.showTableEmpty = true;
	    					}
	    				}else{
	    					this.showCascader=false
	    					this.changeDisplay='none'
	    					this.showTable = false;
		                    this.showHighChart=false;
							this.showTableEmpty = true;
	    				}
					}else{
						this.showCascader=false
						this.changeDisplay='none'
    					this.showTable = false;
	                    this.showHighChart=false;
						this.showTableEmpty = true;
					}
				})
				.catch((error) => {
    				this.changeDisplay='none'
                    this.showTable = false;
                    this.showHighChart=false;
					this.showTableEmpty = true;
                })
				
			},
			
			//获取广告组的列表
			getAdgroupList(){
				this.$store.dispatch('getAdgroupList',{})
				.then((response) => {
					if (response) {
						if (response.data.success == true) {
	    					let result = response.data;
	    					if (result.data!='') {
	    						this.showCascader=true
	    						let adgroupList=result.data
	    						for (var i=0;i<adgroupList.length;i++) {
	    							var children=[]
	    							var adGroupListArr=adgroupList[i].adGroupList
	    							for (var j=0;j<adGroupListArr.length;j++) {
	    								children.push({"value":adGroupListArr[j].id,"label":adGroupListArr[j].name})
	    								if (adGroupListArr[j].id==this.id && this.changeState) {
											this.selectedOptions3.push(adgroupList[i].id,adGroupListArr[j].id)
											this.changeState=false
										}
	    							}
	    							this.options2.push({"value":adgroupList[i].id,"label":adgroupList[i].name,"children":children})
	    						}
	    					}else{
	    						this.showCascader=false
	    						this.changeDisplay='none'
		    					this.showTable = false;
			                    this.showHighChart=false;
								this.showTableEmpty = true;
	    					}
	    				}else{
	    					this.showCascader=false
	    					this.changeDisplay='none'
	    					this.showTable = false;
		                    this.showHighChart=false;
							this.showTableEmpty = true;
	    				}
					}else{
						this.showCascader=false
    					this.changeDisplay='none'
    					this.showTable = false;
	                    this.showHighChart=false;
						this.showTableEmpty = true;
					}
				})
				.catch((error) => {
    				this.changeDisplay='none'
                    this.showTable = false;
                    this.showHighChart=false;
					this.showTableEmpty = true;
                })
				
			},
			
			//获取广告的列表
			getAdList(){
				this.$store.dispatch('getAdList',{})
				.then((response) => {
					if (response) {
						if (response.data.success == true) {
	    					let result = response.data;
	    					if (result.data!='') {
	    						this.showCascader=true
	    						let adseriesList=result.data
	    						for (var i=0;i<adseriesList.length;i++) {
	    							var children=[]
	    							var adgroupListArr=adseriesList[i].adGroupList
	    							for (var j=0;j<adgroupListArr.length;j++) {
	    								var children2=[]
	    								var adListArr=adgroupListArr[j].adList
	    								for (var k=0;k<adListArr.length;k++) {
	    									children2.push({"value":adListArr[k].id,"label":adListArr[k].name})
	    									if (adListArr[k].id==this.id && this.changeState) {
	    										this.selectedOptions3.push(adseriesList[i].id,adgroupListArr[j].id,adListArr[k].id)
	    										this.changeState=false
	    									}
	    								}
	    								children.push({"value":adgroupListArr[j].id,"label":adgroupListArr[j].name,"children":children2})
	    							}
	    							this.options2.push({"value":adseriesList[i].id,"label":adseriesList[i].name,"children":children})
	    						}
	    					}else{
	    						this.showCascader=false
	    						this.changeDisplay='none'
		    					this.showTable = false;
			                    this.showHighChart=false;
								this.showTableEmpty = true;
	    					}
	    				}else{
	    					this.showCascader=false
	    					this.changeDisplay='none'
	    					this.showTable = false;
		                    this.showHighChart=false;
							this.showTableEmpty = true;
	    				}
					}else{
						this.showCascader=false
    					this.changeDisplay='none'
    					this.showTable = false;
	                    this.showHighChart=false;
						this.showTableEmpty = true;
					}
				})
				.catch((error) => {
    				this.changeDisplay='none'
                    this.showTable = false;
                    this.showHighChart=false;
					this.showTableEmpty = true;
                })
			},
        	
        	//查询广告系列条件下总花费、总覆盖数、总展示数、总成效数、总cpc、总cpm、总的成效转化率
			getAdseriesTotal(id){
				this.$store.dispatch('getAdseriesTotal',{"id":id})
        			.then((response) => {
        				if(response){
        					if(response.data.success == true){
	                            let result = response.data;
	                            if(result.data){
	                            	this.createCanvas((result.data.spend).toFixed(2))
	                                this.cover = result.data.reach;
	                                this.show = result.data.impressions;
	                                this.effect = result.data.effective;
	                                this.cpm = (result.data.cpm).toFixed(2);
	                                this.cpc = (result.data.cpc).toFixed(2);
	                                this.change = ((result.data.effectiveCtr)*100).toFixed(2);
	                                this.showTable=false
	                            }
	                        }
        				}else{
        					this.changeDisplay='none'
	                        this.showTable = false;
		                    this.showHighChart=false;
							this.showTableEmpty = true;
        				}
        			})
        			.catch((error) => {
        				this.changeDisplay='none'
                        this.showTable = false;
	                    this.showHighChart=false;
						this.showTableEmpty = true;
                    })
			},
			
			//查询广告组条件下总花费、总覆盖数、总展示数、总成效数、总cpc、总cpm、总的成效转化率
			getAdgroupTotal(id){
				this.$store.dispatch('getAdgroupTotal',{"id":id})
        			.then((response) => {
        				if(response){
        					if(response.data.success == true){
	                            let result = response.data;
	                            if(result.data){
	                            	this.createCanvas((result.data.spend).toFixed(2))
	                                this.cover = result.data.reach;
	                                this.show = result.data.impressions;
	                                this.effect = result.data.effective;
	                                this.cpm = (result.data.cpm).toFixed(2);
	                                this.cpc = (result.data.cpc).toFixed(2);
	                                this.change = ((result.data.effectiveCtr)*100).toFixed(2);
	                            }
	                        }
        				}
        			})
        			.catch((error) => {
        				this.changeDisplay='none'
                        this.showTable = false;
	                    this.showHighChart=false;
						this.showTableEmpty = true;
                    })
			},
			
			//查询广告条件下总花费、总覆盖数、总展示数、总成效数、总cpc、总cpm、总的成效转化率
			getAdTotal(id){
				this.$store.dispatch('getAdTotal',{"id":id})
        			.then((response) => {
        				if(response){
        					if(response.data.success == true){
	                            let result = response.data;
	                            if(result.data){
	                            	this.createCanvas((result.data.spend).toFixed(2))
	                                this.cover = result.data.reach;
	                                this.show = result.data.impressions;
	                                this.effect = result.data.effective;
	                                this.cpm = (result.data.cpm).toFixed(2);
	                                this.cpc = (result.data.cpc).toFixed(2);
	                                this.change = ((result.data.effectiveCtr)*100).toFixed(2);
	                            }
	                        }
        				}
        			})
        			.catch((error) => {
        				this.changeDisplay='none'
                        this.showTable = false;
	                    this.showHighChart=false;
						this.showTableEmpty = true;
                    })
			},

			//改变时间日期来改变charts1、charts2、charts3、charts4的数据
        	changeDate(){
        		let index
				this.searchbtn.forEach((n,i)=>{
                    if ( n.isactive==true) {
                    	index=i
                    }
	          	});
	          	if (this.value && this.newValue && this.stateFlag) {
          			this.dateRange=''
          			this.startTime=''
          			this.endTime=''
	          		this.showTable=true
	          		this.showHighChart=true
        			this.showTableEmpty = false
	          		this.clearCharts1Data()
		    		this.clearCharts2Data()
		    		this.clearCharts3Data()
		    		this.clearCharts4Data()
		        	this.getDate()
					this.addClass(index)
	          	}
	          	if (this.stateFlag==false) {
	          		this.showTable=true
	          		this.showHighChart=true
        			this.showTableEmpty = false
	          		this.clearCharts1Data()
		    		this.clearCharts2Data()
		    		this.clearCharts3Data()
		    		this.clearCharts4Data()
		        	this.getDate()
					this.addClass(index)
					this.stateFlag=true
	          	}
				this.showDateSelector = this.value == '' ? true:false;
	       	},
	       	
	       	//自定义时间
	       	handleDateChange(value){
	       		if (value) {
	       			this.value=''
					this.startTime=value.slice(0,10)
					this.endTime=value.slice(13,23)
					let index
					this.searchbtn.forEach((n,i)=>{
	                    if ( n.isactive==true) {
	                    	index=i
	                    }
		          	});
		          	this.showTable=true
		          	this.showHighChart=true
		          	this.showTableEmpty = false
	          		this.clearCharts1Data()
		    		this.clearCharts2Data()
		    		this.clearCharts3Data()
		    		this.clearCharts4Data()
		        	this.getDate()
					this.addClass(index)
	       		}
			},
	       	
	       	//根据时间和id处理charts1和charts2数据
			getDate(){
				if (this.selected==1) {
					this.$store.dispatch('getAdseriesDate',{"updateTime":this.value,"startTime":this.startTime,"endTime":this.endTime,"id":this.newValue})
        				.then((response) => {this.handleDateResponse(response)})
        				.catch((error) => {
        					this.changeDisplay='none'
	                        this.showTable = false;
		                    this.showHighChart=false;
							this.showTableEmpty = true;
	                    })
				}
				if (this.selected==2) {
					this.$store.dispatch('getAdgroupDate',{"updateTime":this.value,"startTime":this.startTime,"endTime":this.endTime,"id":this.newValue})
        				.then((response) => {this.handleDateResponse(response)})
        				.catch((error) => {
        					this.changeDisplay='none'
	                        this.showTable = false;
		                    this.showHighChart=false;
							this.showTableEmpty = true;
	                    })
				}
				if (this.selected==3) {
					this.$store.dispatch('getAdDate',{"updateTime":this.value,"startTime":this.startTime,"endTime":this.endTime,"id":this.newValue})
        				.then((response) => {this.handleDateResponse(response)})
        				.catch((error) => {
        					this.changeDisplay='none'
	                        this.showTable = false;
		                    this.showHighChart=false;
							this.showTableEmpty = true;
                    	})
				}
			},
			
			//处理对应的广告系列、广告组、广告的时间数据
			handleDateResponse(response){
				if (response) {
					if (response.data.success == true) {
						let result = response.data;
						if (result.data.dateList.length!=0) {
							//获取date数据中dateList的数据展示charts1
							this.charts1.chart.type="line"
							this.charts1.yAxis.max=null
							this.charts1.legend.enabled=true
							this.charts1.tooltip.enabled=true
							this.charts2.yAxis.max=null
							this.charts2.legend.enabled=true
							let dateList=result.data.dateList
							let dateReachArr=[];
							let dateImpressionsArr=[];
							let dateEffectiveArr=[];
							let dateTimeArr=[];
							dateList = dateList.sort(function(a,b){return a.time>b.time;})//将数组对象按照时间来排序
							for (var i=0;i<dateList.length;i++) {
								dateReachArr.push(dateList[i].reach)
								dateImpressionsArr.push(dateList[i].impressions)
								dateEffectiveArr.push(dateList[i].effective)
								dateTimeArr.push(dateList[i].time)
							}
							dateTimeArr.sort()
							let dateTimeArrNew=[]
							for (var i=0;i<dateTimeArr.length;i++) {
								dateTimeArrNew.push(this.formatDate1(new Date(dateTimeArr[i])))
							}
							this.charts1Data.push(
								{name:"覆盖数", data : dateReachArr},
								{name:"展示数", data : dateImpressionsArr},
								{name:"成效", data : dateEffectiveArr}
							)
							
							this.charts1.series =  this.charts1Data;
							this.charts1.xAxis.categories=dateTimeArrNew
							//获取date数据中weekList的数据展示charts2
	  						let weekList=result.data.weekList
							let weekReachArr=[];
							let weekImpressionsArr=[];
							let weekEffectiveArr=[];
							let weekTimeArr=[];
							for (var i=0;i<weekList.length;i++) {
								weekReachArr.push(weekList[i].reach)
								weekImpressionsArr.push(weekList[i].impressions)
								weekEffectiveArr.push(weekList[i].effective)
								weekTimeArr.push(weekList[i].week)
							}
							var weekReachArrSum=0
							var weekImpressionsArrSum=0
							var weekEffectiveArrSum=0
							for (var l=0;l<weekReachArr.length;l++) {
								weekReachArrSum+=weekReachArr[l]
							}
							for (var m=0;m<weekImpressionsArr.length;m++) {
								weekImpressionsArrSum+=weekImpressionsArr[m]
							}
							for (var n=0;n<weekEffectiveArr.length;n++) {
								weekEffectiveArrSum+=weekEffectiveArr[n]
							}
							
							this.charts2Data.push(
								{name:"覆盖数",total:weekReachArrSum, data : weekReachArr},
								{name:"展示数",total:weekImpressionsArrSum, data : weekImpressionsArr},
								{name:"成效",total:weekEffectiveArrSum, data : weekEffectiveArr}
							)
							this.charts2.series =  this.charts2Data;
							this.charts2.xAxis.categories=weekTimeArr
							this.showTable=false
						}else{
	    					this.charts1.yAxis.max=100
	    					this.charts1.chart.type="column"
							this.charts1.series =[0,0,0,0,0,0,0]
							this.charts1.tooltip.enabled=false
							this.charts1.legend.enabled=false
							this.charts2.yAxis.max=100
							this.charts2.series =[0,0,0,0,0,0,0];
							this.charts2.legend.enabled=false
	    				}
					}else{
						this.changeDisplay='none'
						this.showTable = false;
	                    this.showHighChart=false;
						this.showTableEmpty = true;
					}
				}else{
					this.changeDisplay='none'
					this.showTable = false;
                    this.showHighChart=false;
					this.showTableEmpty = true;
				}
				
			},
			
			//清空所有charts的数据
			clearCharts1Data() {
                this.charts1Data = [];    //清除原先存在的数据
                this.charts1.series = [];
            },
			clearCharts2Data() {
                this.charts2Data = [];    //清除原先存在的数据
                this.charts2.series = [];
           	},
			clearCharts3Data() {
                this.charts3Data = [];    //清除原先存在的数据
                this.charts3.series = [];
                this.objClone = {};
            },
			clearCharts4Data() {
                this.charts4Data = [];    //清除原先存在的数据
                this.charts4.series[0].data = [];
                this.objClone = {};
            },
			
			//改变位置、年龄、性别、展示设备，来改变charts3和charts4
        	addClass(index){//添加样式
        		this.searchbtn.forEach((n,i)=>{
	                n.isactive = i == index?true:false
	           });
        		if(this.newValue != ''){
        			this.showTable=true
	        		this.showHighChart=true
	          		this.showTableEmpty = false
	        		if (index==0) {
	        			this.clearCharts3Data()
						this.clearCharts4Data()
						this.getCountryData()
	        		}
	        		if (index==1) {
	        			this.clearCharts3Data()
						this.clearCharts4Data()
						this.getAgeData()
	        		}
	        		if (index==2) {
	        			this.clearCharts3Data()
						this.clearCharts4Data()
						this.getGenderData()
	        		}
	        		if (index==3) {
	        			this.clearCharts3Data()
						this.clearCharts4Data()
						this.getDeviceData()
	        		}
        		}
        		
       		},
			
			//按覆盖数、展示数、成效、花费、成效转化率来显示charts3和charts4数据
			changeCondition(){
				if(this.newValue != ''){
					this.showTable=true
					this.showHighChart=true
	          		this.showTableEmpty = false
					var index
					this.searchbtn.forEach((n,i)=>{
	                    if ( n.isactive==true) {
	                    	index=i
	                    }
		           	});
					if (index==0) {
						this.clearCharts3Data()
						this.clearCharts4Data()
						this.getCountryData()
					}
					if (index==1) {
						this.clearCharts3Data()
						this.clearCharts4Data()
						this.getAgeData()
					}
					if (index==2) {
						this.clearCharts3Data()
						this.clearCharts4Data()
						this.getGenderData()
					}
					if (index==3) {
						this.clearCharts3Data()
						this.clearCharts4Data()
						this.getDeviceData()
					}
				}
				
			},
			
			//按位置查询charts3和charts4数据
			getCountryData(){
				if (this.selected==1) {
					this.$store.dispatch('getAdseriesCountryData',{"updateTime":this.value,"startTime":this.startTime,"endTime":this.endTime,"id":this.newValue})
					.then((response) => {this.handleCountryData(response)})
					.catch((error) => {
							this.changeDisplay='none'
	                        this.showTable = false;
		                    this.showHighChart=false;
							this.showTableEmpty = true;
                    })
				}
				if (this.selected==2) {
					this.$store.dispatch('getAdgroupCountryData',{"updateTime":this.value,"startTime":this.startTime,"endTime":this.endTime,"id":this.newValue})
					.then((response) => {this.handleCountryData(response)})
					.catch((error) => {
							this.changeDisplay='none'
	                        this.showTable = false;
		                    this.showHighChart=false;
							this.showTableEmpty = true;
                    })
				}
				if (this.selected==3) {
					this.$store.dispatch('getAdCountryData',{"updateTime":this.value,"startTime":this.startTime,"endTime":this.endTime,"id":this.newValue})
					.then((response) => {this.handleCountryData(response)})
					.catch((error) => {
							this.changeDisplay='none'
	                        this.showTable = false;
		                    this.showHighChart=false;
							this.showTableEmpty = true;
                    })
				}
				
			},
			
			handleCountryData(response){
				if (response) {
					if (response.data.success == true) {
						this.changeDisplay='block'
						let resultOld = response.data.data.countryMap;
						if (this.check(resultOld)) {
							this.objSort(resultOld,this.objClone)
							let result=this.objClone
							this.charts3.yAxis.max=null
							this.charts3.tooltip.valueSuffix=''
    						this.charts3.yAxis.labels.format=''
							this.charts4.plotOptions.pie.dataLabels.enabled=true
							this.charts4.plotOptions.pie.showInLegend=true
							let timeArr=[];
							let list = [];
							let numTotal = 0;
							for (var key in result) {
								for (var i in result[key]) {
									let sameName = true;
									for(let j = 0;j<list.length;j++){
										if(result[key][i].flag == list[j].name){
											sameName = false;
										}
									}
									if(sameName){
										list.push({"name":result[key][i].flag,"data":[],"stack":'country'})
									}
								}
							}
							
							for (var key in result) {
								for (var i in result[key]) {
									if(list.length){
										for(let j = 0;j<list.length;j++){
											if(result[key][i].flag == list[j].name){
												if (this.statistics.statisticsStatic==1) {
													list[j].data.push(result[key][i].reach)
												}
												if (this.statistics.statisticsStatic==2) {
													list[j].data.push(result[key][i].impressions)
												}
												if (this.statistics.statisticsStatic==3) {
													list[j].data.push(result[key][i].effective)
												}
												if (this.statistics.statisticsStatic==4) {
													list[j].data.push(result[key][i].spend)
												}
												if (this.statistics.statisticsStatic==5) {
													this.charts3.tooltip.valueSuffix=' %'
													this.charts3.yAxis.labels.format='{value}%'
													list[j].data.push(Number(((result[key][i].effectiveCtr)*100).toFixed(2)))
												}
											}
										}
									}
								}
								timeArr.push(Number(key))
							}
							for(let n = 0; n<list.length; n++){
								let total = 0;
								for(let m = 0;m<list[n].data.length;m++){
									numTotal += list[n].data[m];
								}
							}

							for(let n = 0; n<list.length; n++){
								let total = 0;
								for(let m = 0;m<list[n].data.length;m++){
									total += list[n].data[m];
								}
								this.charts4Data.push([list[n].name,total/numTotal])
							}
							let TimeArrNew=[]
							for (var i=0;i<timeArr.length;i++) {
								TimeArrNew.push(this.formatDate2(new Date(timeArr[i])))
							}
							this.charts3Data =  list;
							this.charts3.series =  this.charts3Data;
							this.charts3.xAxis.categories=TimeArrNew;
							this.charts4.series[0].data = this.charts4Data;
							this.showTable=false
						}else{
							this.showTable=false
							this.charts3.yAxis.max=100
							this.charts3.series =[0,0,0,0,0,0,0];
							this.charts4.series[0].data=[{name:'',y:1,color:'#ccc'}]
							this.charts4.plotOptions.pie.dataLabels.enabled=false
							this.charts4.plotOptions.pie.showInLegend=false
						}
					}else{
						this.showTable=false
						this.changeDisplay='none'
						this.showTable = false;
	                    this.showHighChart=false;
						this.showTableEmpty = true;
					}
				}else{
					this.showTable=false
					this.changeDisplay='none'
					this.showTable = false;
                    this.showHighChart=false;
					this.showTableEmpty = true;
				}
				
			},
			
			//按年龄和日期查询charts3和charts4数据
			getAgeData(){
				if (this.selected==1) {
					this.$store.dispatch('getAdseriesAgeData',{"updateTime":this.value,"startTime":this.startTime,"endTime":this.endTime,"id":this.newValue})
						.then((response) => {this.handleAgeData(response)})
						.catch((error) => {
							this.changeDisplay='none'
	                        this.showTable = false;
		                    this.showHighChart=false;
							this.showTableEmpty = true;
                    	})
				}
				if (this.selected==2) {
					this.$store.dispatch('getAdgroupAgeData',{"updateTime":this.value,"startTime":this.startTime,"endTime":this.endTime,"id":this.newValue})
						.then((response) => {this.handleAgeData(response)})
						.catch((error) => {
							this.changeDisplay='none'
	                        this.showTable = false;
		                    this.showHighChart=false;
							this.showTableEmpty = true;
                   		})
				}
				if (this.selected==3) {
					this.$store.dispatch('getAdAgeData',{"updateTime":this.value,"startTime":this.startTime,"endTime":this.endTime,"id":this.newValue})
						.then((response) => {this.handleAgeData(response)})
						.catch((error) => {
							this.changeDisplay='none'
	                        this.showTable = false;
		                    this.showHighChart=false;
							this.showTableEmpty = true;
                    	})
				}
			},
			
			handleAgeData(response){
				if (response) {
					if (response.data.success == true) {
						this.changeDisplay='block'
						let resultOld=response.data.data.ageMap
						if (this.check(resultOld)) {
							this.objSort(resultOld,this.objClone)
							let result=this.objClone
    						this.charts3.yAxis.max=null
    						this.charts3.tooltip.valueSuffix=''
    						this.charts3.yAxis.labels.format=''
    						this.charts4.plotOptions.pie.dataLabels.enabled=true
    						this.charts4.plotOptions.pie.showInLegend=true
    						let timeArrAge=[];
							let listAge = [];
							let numTotal = 0;
							for (var key in result) {
								for (var i in result[key]) {
									let sameName = true;
									for(let j = 0;j<listAge.length;j++){
										if(result[key][i].flag == listAge[j].name){
											sameName = false;
										}
									}
									if(sameName){
										listAge.push({"name":result[key][i].flag,"data":[],"stack":'age'})
									}	
								}
							}
							for (var key in result) {
								for (var i in result[key]) {
									if(listAge.length){
										for(let j = 0;j<listAge.length;j++){
											
											if(result[key][i].flag == listAge[j].name){
												if (this.statistics.statisticsStatic==1) {
													listAge[j].data.push(result[key][i].reach)
												}
												if (this.statistics.statisticsStatic==2) {
													listAge[j].data.push(result[key][i].impressions)
												}
												if (this.statistics.statisticsStatic==3) {
													listAge[j].data.push(result[key][i].effective)
												}
												if (this.statistics.statisticsStatic==4) {
													listAge[j].data.push(result[key][i].spend)
												}
												if (this.statistics.statisticsStatic==5) {
													this.charts3.tooltip.valueSuffix=' %'
													this.charts3.yAxis.labels.format='{value}%'
													list[j].data.push(Number(((result[key][i].effectiveCtr)*100).toFixed(2)))
												}
											}
										}
									}
								}
								timeArrAge.push(Number(key))
							}
							for(let n = 0; n<listAge.length; n++){
								let total = 0;
								for(let m = 0;m<listAge[n].data.length;m++){
									numTotal += listAge[n].data[m];
								}
							}
							
							for(let n = 0; n<listAge.length; n++){
								let total = 0;
								for(let m = 0;m<listAge[n].data.length;m++){
									total += listAge[n].data[m];
								}
								this.charts4Data.push([listAge[n].name,total/numTotal])
							}
							let TimeArrNew=[]
							for (var i=0;i<timeArrAge.length;i++) {
								TimeArrNew.push(this.formatDate2(new Date(timeArrAge[i])))
							}
							this.charts3Data =  listAge;
							this.charts3.series =  this.charts3Data;
							this.charts3.xAxis.categories=TimeArrNew;
							this.charts4.series[0].data = this.charts4Data;
							this.showTable=false
    					}else{
    						this.showTable=false
    						this.charts3.yAxis.max=100
    						this.charts3.series =[0,0,0,0,0,0,0];
    						this.charts4.series[0].data=[{name:'',y:1,color:'#ccc'}]
    						this.charts4.plotOptions.pie.dataLabels.enabled=false
    						this.charts4.plotOptions.pie.showInLegend=false
    					}
					}else{
						this.showTable=false
						this.changeDisplay='none'
						this.showTable = false;
	                    this.showHighChart=false;
						this.showTableEmpty = true;
					}
				}else{
					this.showTable=false
					this.changeDisplay='none'
					this.showTable = false;
                    this.showHighChart=false;
					this.showTableEmpty = true;
				}
				
			},
			
			//按性别和日期查询charts3和charts4数据
			getGenderData(){
				if (this.selected==1) {
					this.$store.dispatch('getAdseriesGenderData',{"updateTime":this.value,"startTime":this.startTime,"endTime":this.endTime,"id":this.newValue})
						.then((response) => {this.handleGenderData(response)})
						.catch((error) => {
							this.changeDisplay='none'
	                        this.showTable = false;
		                    this.showHighChart=false;
							this.showTableEmpty = true;
                    	})
				}
				if (this.selected==2) {
					this.$store.dispatch('getAdgroupGenderData',{"updateTime":this.value,"startTime":this.startTime,"endTime":this.endTime,"id":this.newValue})
						.then((response) => {this.handleGenderData(response)})
						.catch((error) => {
							this.changeDisplay='none'
	                        this.showTable = false;
		                    this.showHighChart=false;
							this.showTableEmpty = true;
                    	})
				}
				if (this.selected==3) {
					this.$store.dispatch('getAdGenderData',{"updateTime":this.value,"startTime":this.startTime,"endTime":this.endTime,"id":this.newValue})
						.then((response) => {this.handleGenderData(response)})
						.catch((error) => {
							this.changeDisplay='none'
	                        this.showTable = false;
		                    this.showHighChart=false;
							this.showTableEmpty = true;
                    	})
				}
				
			},
			
			handleGenderData(response){
				if (response) {
					if (response.data.success == true) {
						this.changeDisplay='block'
						let resultOld=response.data.data.genderMap
						if (this.check(resultOld)) {
							this.objSort(resultOld,this.objClone)
							let result=this.objClone
							this.charts3.yAxis.max=null
							this.charts3.tooltip.valueSuffix=''
    						this.charts3.yAxis.labels.format=''
							this.charts4.plotOptions.pie.dataLabels.enabled=true
							this.charts4.plotOptions.pie.showInLegend=true
							let timeArr=[];
							let list = [];
							let numTotal = 0;
							for (var key in result) {
								for (var i in result[key]) {
									let sameName = true;
									for(let j = 0;j<list.length;j++){
										if(result[key][i].flag == list[j].name){
											sameName = false;
										}
									}
									if(sameName){
										list.push({"name":result[key][i].flag,"data":[],"stack":'gender'})
									}	
								}
							}
							for (var key in result) {
								for (var i in result[key]) {
									if(list.length){
										for(let j = 0;j<list.length;j++){
											
											if(result[key][i].flag == list[j].name){
												//let sameFlag = true;
												
												if (this.statistics.statisticsStatic==1) {
													list[j].data.push(result[key][i].reach)
												}
												if (this.statistics.statisticsStatic==2) {
													list[j].data.push(result[key][i].impressions)
												}
												if (this.statistics.statisticsStatic==3) {
													list[j].data.push(result[key][i].effective)
												}
												if (this.statistics.statisticsStatic==4) {
													list[j].data.push(result[key][i].spend)
												}
												if (this.statistics.statisticsStatic==5) {
													this.charts3.tooltip.valueSuffix=' %'
													this.charts3.yAxis.labels.format='{value}%'
													list[j].data.push(Number(((result[key][i].effectiveCtr)*100).toFixed(2)))
												}
											}
										}
									}
								}
								timeArr.push(Number(key))
							}
							for(let n = 0; n<list.length; n++){
								let total = 0;
								for(let m = 0;m<list[n].data.length;m++){
									numTotal += list[n].data[m];
								}
							}
							
							for(let n = 0; n<list.length; n++){
								let total = 0;
								for(let m = 0;m<list[n].data.length;m++){
									total += list[n].data[m];
								}
								this.charts4Data.push([list[n].name,total/numTotal])
							}
							timeArr.sort()
							let TimeArrNew=[]
							for (var i=0;i<timeArr.length;i++) {
								TimeArrNew.push(this.formatDate2(new Date(timeArr[i])))
							}
							this.charts3Data =  list;
							this.charts3.series =  this.charts3Data;
							this.charts3.xAxis.categories=TimeArrNew;
							this.charts4.series[0].data = this.charts4Data;
							this.showTable=false
						}else{
							this.showTable=false
							this.charts3.yAxis.max=100
							this.charts3.series =[0,0,0,0,0,0,0];
							this.charts4.series[0].data=[{name:'',y:1,color:'#ccc'}]
							this.charts4.plotOptions.pie.dataLabels.enabled=false
							this.charts4.plotOptions.pie.showInLegend=false
						}
					}else{
						this.showTable=false
						this.changeDisplay='none'
						this.showTable = false;
	                    this.showHighChart=false;
						this.showTableEmpty = true;
					}
				}else{
					this.showTable=false
					this.changeDisplay='none'
					this.showTable = false;
                    this.showHighChart=false;
					this.showTableEmpty = true;
				}
				
			},
			
			//按展示设备和日期查询charts3和charts4数据
			getDeviceData(){
				if (this.selected==1) {
					this.$store.dispatch('getAdseriesDeviceData',{"updateTime":this.value,"startTime":this.startTime,"endTime":this.endTime,"id":this.newValue})
						.then((response) => {this.handleDeviceData(response)})
						.catch((error) => {
							this.changeDisplay='none'
	                        this.showTable = false;
		                    this.showHighChart=false;
							this.showTableEmpty = true;
                    	})
				}
				if (this.selected==2) {
					this.$store.dispatch('getAdgroupDeviceData',{"updateTime":this.value,"startTime":this.startTime,"endTime":this.endTime,"id":this.newValue})
						.then((response) => {this.handleDeviceData(response)})
						.catch((error) => {
							this.changeDisplay='none'
	                        this.showTable = false;
		                    this.showHighChart=false;
							this.showTableEmpty = true;
                    	})
				}
				if (this.selected==3) {
					this.$store.dispatch('getAdDeviceData',{"updateTime":this.value,"startTime":this.startTime,"endTime":this.endTime,"id":this.newValue})
						.then((response) => {this.handleDeviceData(response)})
						.catch((error) => {
							this.changeDisplay='none'
	                        this.showTable = false;
		                    this.showHighChart=false;
							this.showTableEmpty = true;
                    	})
				}
				
			},
			
			handleDeviceData(response){
				if (response) {
					if (response.data.success == true) {
						this.changeDisplay='block'
						let resultOld=response.data.data.deviceMap
						if (this.check(resultOld)) {
							this.objSort(resultOld,this.objClone)
							let result=this.objClone
							this.charts3.yAxis.max=null
							this.charts3.tooltip.valueSuffix=''
    						this.charts3.yAxis.labels.format=''
							this.charts4.plotOptions.pie.dataLabels.enabled=true
							this.charts4.plotOptions.pie.showInLegend=true
							let timeArr=[];
							let list = [];
							let numTotal = 0;
							for (var key in result) {
								for (var i in result[key]) {
									let sameName = true;
									for(let j = 0;j<list.length;j++){
										if(result[key][i].flag == list[j].name){
											sameName = false;
										}
									}
									if(sameName){
										list.push({"name":result[key][i].flag,"data":[],"stack":'device'})
									}	
								}
							}
							for (var key in result) {
								for (var i in result[key]) {
									if(list.length){
										for(let j = 0;j<list.length;j++){
											
											if(result[key][i].flag == list[j].name){
												//let sameFlag = true;
												
												if (this.statistics.statisticsStatic==1) {
													list[j].data.push(result[key][i].reach)
												}
												if (this.statistics.statisticsStatic==2) {
													list[j].data.push(result[key][i].impressions)
												}
												if (this.statistics.statisticsStatic==3) {
													list[j].data.push(result[key][i].effective)
												}
												if (this.statistics.statisticsStatic==4) {
													list[j].data.push(result[key][i].spend)
												}
												if (this.statistics.statisticsStatic==5) {
													this.charts3.tooltip.valueSuffix=' %'
													this.charts3.yAxis.labels.format='{value}%'
													list[j].data.push(Number(((result[key][i].effectiveCtr)*100).toFixed(2)))
												}
											}
										}
									}
								}
								timeArr.push(Number(key))
							}
							for(let n = 0; n<list.length; n++){
								let total = 0;
								for(let m = 0;m<list[n].data.length;m++){
									numTotal += list[n].data[m];
								}
							}
							
							for(let n = 0; n<list.length; n++){
								let total = 0;
								for(let m = 0;m<list[n].data.length;m++){
									total += list[n].data[m];
								}
								this.charts4Data.push([list[n].name,total/numTotal])
							}
							timeArr.sort()
							let TimeArrNew=[]
							for (var i=0;i<timeArr.length;i++) {
								TimeArrNew.push(this.formatDate2(new Date(timeArr[i])))
							}
							this.charts3Data =  list;
							this.charts3.series =  this.charts3Data;
							this.charts3.xAxis.categories=TimeArrNew;
							this.charts4.series[0].data = this.charts4Data;
							this.showTable=false
						}else{
							this.showTable=false
							this.charts3.yAxis.max=100
							this.charts3.series =[0,0,0,0,0,0,0];
							this.charts4.series[0].data=[{name:'',y:1,color:'#ccc'}]
							this.charts4.plotOptions.pie.dataLabels.enabled=false
							this.charts4.plotOptions.pie.showInLegend=false
						}
					}else{
						this.showTable=false
						this.changeDisplay='none'
						this.showTable = false;
	                    this.showHighChart=false;
						this.showTableEmpty = true;
					}
				}else{
					this.showTable=false
					this.changeDisplay='none'
					this.showTable = false;
                    this.showHighChart=false;
					this.showTableEmpty = true;
				}
				
			},
			
			//绘制总花费的圆形图
       		createCanvas(spend){
        		var c=window.document.getElementById("myCanvas");
				var ctx=c.getContext("2d");
				function draw(current){
					ctx.beginPath();
					ctx.lineWidth=16;
					ctx.strokeStyle='#efefef'
					ctx.arc(130,85,65,0,2*Math.PI);
					ctx.stroke();
					ctx.beginPath();
					ctx.lineWidth=16;
					ctx.strokeStyle='red'
					ctx.arc(130,85,65,-0.5*Math.PI,current*(2*Math.PI)- Math.PI/2);
					ctx.textAlign="center";
					ctx.lineCap="round";
					ctx.stroke();
					ctx.globalCompositeOperation = 'source-atop';//解决canvas绘图出来边上有毛刺的问题
				}
				var t=0;
				var timer=null;
				function loadCanvas(now){
					timer = setInterval(function(){
						if(t>now){
							clearInterval(timer);
						}else{
							draw(t);
							t+=0.005;
						}
					},5);
				}
				if (spend==0) {
					this.spendText=spend
					loadCanvas(0)
				}else{
					this.spendText=spend
					loadCanvas(spend/this.allTotalSpend);
					
				}
				timer=null;
				
       		},
       		//将对象排序
       		objSort(obj,clone){
       			Object.keys(obj).sort().map(a=>{clone[a]=obj[a]})
       			return clone;
       		},
       		//转化时间戳
       		formatDate1(now){  
       			var year=now.getFullYear();
              	var month=now.getMonth()+1;     
              	var date=now.getDate();  
              	return year+"/"+month+"/"+date     
           	},
       		formatDate2(now){
              	var month=now.getMonth()+1;     
              	var date=now.getDate();  
              	return month+"/"+date     
           },
       		
       		//判断对象是否为空
       		check(obj){
			    if (typeof obj === "object" && !(obj instanceof Array)){  
			        var hasProp = false;  
			        for (var prop in obj){  
			            hasProp = true;  
			            break;  
			        }  
			    }
			    return hasProp;
			},
       		
			//取Url参数
			getUrl() {
			    var url = location.search; 
			    var theRequest = new Object();
			    if (url.indexOf("?") != -1) {
			        var str = url.substr(1);
			        var strs = str.split("&");
			        for(var i = 0; i < strs.length; i ++) {
			            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
			        }
			    }
		    	this.type=theRequest.type
		    	this.id=theRequest.id
			}
        }
	}
</script>

<style lang="scss">
	.mult-text{
	    line-height:20px;
	}
	.el-cascader-menu{
		width: 220px;
	}
	.el-cascader--small .el-cascader__label{
		line-height: 38px;
	}
	.statisticsContent{
		.clear{
			clear: both;
		}
		form{
			text-align: left;
		}
		.formItem{
			margin-bottom: 0;
		}
		.selectClass{
			width:160px;
		}
		.el-cascader{
			margin:0 8px;
		}
		.el-date-editor{
			margin-left:8px;
		}
		.tag-box-border{
			overflow: hidden;
			background: #fff;
			margin-bottom: 15px;
		    border:1px solid #EAEEF0;
		    border-radius: 4px;
		    padding:20px;
		}
		.lineClass{
			clear: both; 
			padding: 1px 0 0 0;
			background: #D5DFE4;
			margin: 22px 0;
		}
		.lineClass2{
			margin:0;
			margin-bottom: 22px;
		}
		.titleName{
			float: left; 
			font-size: 18px;
			font-weight: 500;
			color: #333333;
			letter-spacing: 0.6px
		}
		.tip-txt{
			font-size: 12px;
			color: #FF3526;
			text-align: center;
		}
		.staticClass{
			width:160px; 
			clear: both;
			float: right;
			margin: 20px 458px;
			margin-left: 0;
		}
		.marginRight{
			margin-right:6px;
		}
		.dateSelector{
			margin-left: 755px;
		}
		
		.empty-content {
            position: relative;
            text-align: center;
            img {
            	position: absolute;
	            top: 50%;
	            left: 55%;
	            transform: translate(-50%, -50%);
                width: 100px;
                height: 100px;
            }
            span {
            	position: absolute;
	            top: 65%;
	            left: 55%;
	            transform: translate(-75%, 0);
                font-size: 13px;
                color: #0686F9;
                letter-spacing: 0;
                display:inline-block;
            }
        }
        .emptyWidth1{
        	
        	width: 546px;
        	height: 435px;
        }
        .emptyWidth2{
        	width: 550px;
        	height: 435px;
        }
        .emptyWidth3{
        	width: 535px;
        	height: 375px;
        	span{
        		margin-top: 10px;
        	}
        }
		.text{
			position: absolute;
			top: 45px;
			left: 82px;
			font-size: 23px;
			line-height: 100px;
			text-align: center;
			display: inline-block;
			width: 115px;
			height: 100px;
			color: red;
		}
		.highcharts-box-border{
			background: #fff;
			float: left;
		}
		.Hightline{
			float: left;
			width: 1px;
			height: 360px;
			background: #EAEEF0;
			margin-left: 20px;
		}
		.pie-box-border{
			float: left;
		}
		.button{
			margin: 15px 0;
			overflow: hidden;
			.item {
	                height: 30px;
	                font-size: 14px;
	                color: #333;
	                letter-spacing: 0.47px;
	                text-align: center;
	                line-height: 30px;
	                float: left;
	                padding: 0 20px;
	                border-radius: 2em;
	                cursor: pointer  ;
	            }
	            .item.active {
	            	background: #0686F9;
	                font-family: STHeitiSC-Light;
	                color: #fff;
	            }
		}
		.total-box-border{
			float: left;
			display: inline-block;
			width: 260px;
			height: 160px;
			margin: 5px 5px;
			padding: 10px;
		    border:1px solid #EAEEF0;
		    border-radius: 4px;
		    position: relative;
		    background: #FFFFFF;
		    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.06);
		}
		.total{
			font-size: 14px;
			position: absolute;
			left: 20px;
			top: 20px;
		}
		.item-box-border{
			width: 865px;
			float: left;
			li{
				font-size: 14px;
				padding: 10px;
				margin: 5px 5px;
				width: 255px;
				height: 64px;
				float: left;
				border:1px solid #EAEEF0;
				border-radius: 4px;
				.icon-tip {
					color: #cacaca;
					font-size: 12px;
					margin-left: 5px;
				}
				span{
					display: inline-block;
					width: 4px;
					border-top-left-radius:35%;
					border-top-right-radius:35%;
					margin-top: 13px;
					margin-right:5px ;
				}
				span.line_1{
					height: 4px;
				}
				span.line_2{
					height: 12px;
				}
				span.line_3{
					height: 14px;
				}
				span.line_4{
					height: 24px;
				}
				span.line_5{
					height: 22px;
				}
				span.line_6{
					height: 30px;
				}
				span.line_7{
					height: 12px;
				}
				span.line_8{
					height: 22px;
				}
				b{
					float: right;
					font-weight: 500;
					font-size: 26px;
					margin-top: 14px;
				}
			}
			li.item_line_1{
				span{
					background: #2a80f2;
				}
				b{
					color: #2a80f2;
				}
			}
			li.item_line_2{
				span{
					background: #5fd863;
				}
				b{
					color: #5fd863;
				}
			}
			li.item_line_3{
				span{
					background: #9167f8;
				}
				b{
					color: #9167f8;
				}
			}
			li.item_line_4{
				span{
					background: #58cdaf;
				}
				b{
					color: #58cdaf;
					i{
						font-style: normal;
					}
				}
			}
			li.item_line_5{
				span{
					background: #feb033;
				}
				b{
					color: #feb033;
					i{
						font-style: normal;
					}
				}
			}
			li.item_line_6{
				span{
					background: #79cffb;
				}
				b{
					color: #79cffb;
					i{
						cursor: pointer;
						font-style: normal;
					}
				}
			}
		}
	}
	
</style>